<template>
    <div class="vip-order-detail-report">
        <search-form :searchArray="searchArray"></search-form>
        <div class="table-box">
            <div class="title">
                <div class="detail">
                    <span class="detail-item" v-for="(item, i) in detailList" :key="i">
                        {{item.label}}<span class="num">{{item.value}}</span>
                    </span>
                </div>
                <div class="control">
                    <el-button>导出</el-button>
                </div>
            </div>
            <elTable :formData="formData" @tableData="getList" ref="dataInfo">
                    <el-table-column prop="name" label="下单时间" align="center"></el-table-column>
                    <el-table-column prop="group" label="名称" align="center"></el-table-column>
                    <el-table-column prop="group" label="总订单" align="center"></el-table-column>
                    <el-table-column prop="group" label="实际订单" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="供应商" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="商品总额" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="供应商订单总价" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="未发货金额" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="差价" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="所享优惠" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="未享优惠" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="应收额" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="退款现金" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="退款红包" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="退款时间" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="实收额" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="红包抵扣" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="实付额" align="center"></el-table-column>
                    <el-table-column prop="loginTime" label="付款时间" fixed="right" align="center"></el-table-column>
            </elTable>
        </div>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
export default {
    name: 'vipOrderDetailReport',
    components: {
        elTable
    },
    data () {
        return {
            formData: {
                name: "",
                userName: "",
                userStatus: "",
                currentPage: 1,
                pageSize: 10,
            },
            searchArray: [
                {
                    type:'input',
                    placeholder: '请输入总订单号',
                    value: '',
                    label: '总订单号',
                },
                {
                    type:'input',
                    placeholder: '请输入药店名称',
                    value: '',
                    label: '药店名称',
                },
                {
                    type:'input',
                    placeholder: '请输入所属供应商',
                    value: '',
                    label: '所属供应商',
                },
                {
                    type: "datePicker",
                    startText: "开始日期",
                    endText: "结束日期",
                    types: "daterange",
                    value: "",
                    label: '日期选择',
                    rangeSpeparator: "至"
                },
            ],
            detailList: [
                {
                    label: '平台给供应商总价:',
                    value: '2500'
                },
                {
                    label: '供应商订单总价:',
                    value: '2500'
                },
                {
                    label: '未发货金额:',
                    value: '2500'
                },
                {
                    label: '差价:',
                    value: '2500'
                },
                {
                    label: '应享优惠:',
                    value: '2500'
                },
                {
                    label: '未享优惠:',
                    value: '2500'
                },
                {
                    label: '应收金额:',
                    value: '2500'
                },
                {
                    label: '应退金额:',
                    value: '2500'
                },
                {
                    label: '实收金额:',
                    value: '2500'
                },
                {
                    label: '成本总额:',
                    value: '2500'
                },
                {
                    label: '订单数量:',
                    value: '2500'
                },
                {
                    label: '实际成交总额（实付额）:',
                    value: '2500'
                },
                {
                    label: '订单总额:',
                    value: '2500'
                }
            ]
        }
    },
    methods: {
        getList(pageNo) {
            let dataInfo = [
                {
                    id: 1,
                    name: "你好",
                    createTime: '1595244696000'
                },
                {
                    id: 2,
                    name: "你好1",
                    createTime: '1595244696000'
                },
            ];
            let total = 10;
            this.$nextTick(() => {
                this.$refs.dataInfo.loadData(dataInfo, total);
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.vip-order-detail-report {
    .table-box {
        margin-top: 16px;
        .title {
            padding-bottom: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .detail {
                line-height: 20px;
                width: calc(100% - 80px);
                .num {
                    color: #f00;
                }
            }
        }
    }
}
</style>